/** * Create by mzq * Description: 易爱脑血管监测预警监护中心 * Date: 2024/9/14 11:33 * Update:
2024/9/14 11:33 */
<template>
  <div class="content">
    <div class="title flex justify-center items-center">
      <div>
        <img src="../../../image/center/1.png" alt="" />
      </div>
      <div class="size">易爱脑血管监测预警监护中心</div>
      <div>
        <img src="../../../image/center/1.png" alt="" />
      </div>
    </div>

    <div class="flex flex-wrap pl-[40px] pr-[40px] mt-[20px] relative">
      <div class="bg" v-for="item in list" :key="item.id">
        <div>
          <img src="../../../image/man.png" alt="">
        </div>
        <div class="mt-[0.026rem]">{{ item.name }}</div>
      </div>

      <MyRadar class="MyRadar"></MyRadar>
    </div>
  </div>
</template>
<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  reqData: {
    type: Object
  }
})

// 雷达效果
import MyRadar from '@/views/components/MyRadar.vue'

const list = ref([])


watch(() => props.reqData,(val) =>{

  // 判断object是否为空
  if (Object.keys(val.onlineUser).length!==0){
    for (let textKey in val.onlineUser) {
      let obj = {}
      obj.id = textKey
      obj.name = val.onlineUser[textKey]
      list.value.push(obj)
    }
  }



})

</script>
<style scoped lang="scss">
.content {
  margin-top: 80px;
  color: white;

  .title {
    .size {
      margin-left: 0.1146rem /* 22/192 */;
      margin-right: 0.1146rem /* 22/192 */;
      color: #4adde4;
      font-size: 0.0729rem /* 14/192 */;
    }
  }

  .bg {
    margin-right: 0.1042rem  /* 20/192 */;
    margin-top: 0.0625rem  /* 12/192 */;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    width: 0.2865rem  /* 55/192 */;
    height: 0.2865rem  /* 55/192 */;
    background: #041c31;
  }
}

.MyRadar{
  position: absolute;
  top: 40%;
}

</style>
